<template>
  <el-container ref="bigModel" class="main-model">
    <!-- 设备抗社会属性分析-大屏 -->
    <el-header>
      <Header :active-title="4" />
    </el-header>
    <el-main>
      <div>
        <div class="home-model">
          <el-row>
            <el-col :span="leftModelSpan" style="background-color: #113367">
              <div class="home-model-left">
                <indexTree />

                <img v-if="rightModelShow" :src="require('@/assets/xd/new/Group 1142813242.png')" alt="" class="rightJ"
                  @click="hideRightModel">
                <img v-else :src="require('@/assets/xd/new/Group 1142813263.png')" alt="" class="rightJ" style=""
                  @click="showRightModel">
              </div>
            </el-col>
            <el-col :span="rightModelSpan">
              <div class="home-model-right">
                <div class="infoModel">
                  <div class="infoTitle flex-container">
                    归属组织泄露风险统计
                    <!-- 跳转终端页面 -->
                    <el-button type="text" @click="showantiAttributive" class="more">
                      更多
                    </el-button>
                  </div>
                  <div class="infoContent" :style="{ height: infoHeight + 'px' }">
                    <!-- <div ref="mychart" class="echart" style="width: 100%; height: 100%" /> -->
                    <piechart />
                  </div>
                </div>
                <div class="infoModel">
                  <div class="infoTitle flex-container">
                    归属组织泄露风险告警
                    <!-- 跳转终端页面 -->
                    <el-button type="text" @click="showantiAttributive" class="more">
                      更多
                    </el-button>
                  </div>
                  <div class="infoContent" :style="{ height: infoHeight + 'px' }">
                    <list-scroll class="box" :speed="0.5">
                      <div class="list">
                        <div class="infoItem1" v-for="(item, index) in infoList" :key="index">
                          <div class="_num">
                            {{ index + 1 }}
                          </div>
                          <div class="_cont">
                            {{ item.content }}
                          </div>
                        </div>
                      </div>
                    </list-scroll>
                  </div>
                </div>
                <div class="infoModel">
                  <div class="infoTitle flex-container">
                    归属组织保护任务列表
                    <!-- 跳转终端页面 -->
                    <el-button type="text" @click="showantiAttributive" class="more">
                      更多
                    </el-button>
                  </div>
                  <div class="infoContent" :style="{ height: infoHeight + 'px' }">
                    <list-scroll class="box" :speed="0.5">
                      <div class="list">
                        <div class="infoItem2" v-for="(item, index) in infoList2" :key="index">
                          <div class="_num">
                            {{ index + 1 }}
                          </div>
                          <div class="_cont">
                            {{ item.content }}
                          </div>
                        </div>
                      </div>
                    </list-scroll>
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </el-main>
  </el-container>
</template>

<script>
// 弹窗为dialog4， 3.5.6
import Header from "@/views/xd/components/Header";
// import indexTree from "@/views/xd/demo/indexTree.vue";
import indexTree from "@/views/xd/components/charts/new/equipmentRelationship.vue";
import ListScroll from "@/components/DtSrcollCopy2";
import piechart from "@/views/xd/components/charts/new/huanxing2.vue";
import * as echarts from 'echarts';

// const toPath = (e) => {
//   console.log(e)
//   router.push({path:'/'+e,query:{id:'1'}});
// };
export default {
  components: { Header, indexTree, ListScroll, piechart },
  data() {
    return {
      rightModelShow: true,
      rightModelSpan: 5,
      leftModelSpan: 19,
      activeIndex: "1",
      activeIndex2: "1",
      formInline: {
        user: "",
        region: "",
      },
      infoList: [
        {
          content:
            "253单位，202.197.9.35，泄露风险等级高",
        },
        {
          content:
            "253单位，202.197.9.14，泄露风险等级高",
        },
        {
          content:
            "896单位，202.197.9.36，泄露风险等级高",
        },
        {
          content:
            "836单位，202.197.9.30，泄露风险等级高",
        },
        {
          content:
            "852单位，202.197.9.62，泄露风险等级高",
        },
        {
          content:
            "825单位，202.197.9.31，泄露风险等级高",
        },
      ],
      infoList2: [
        {
          content: "262单位，202.197.9.62，归属保护已完成",
        },
        {
          content: "235单位，202.197.9.62，归属保护已完成70%",
        },
        {
          content: "274单位，202.197.9.62，归属保护已完成60%",
        },
        {
          content: "296单位，202.197.9.62，归属保护已完成50%",
        },
        {
          content: "225单位，202.197.9.62，归属保护已完成40%",
        },
        {
          content: "277单位，202.197.9.62，归属保护已完成30%",
        },
      ],

      infoHeight: 300,
      // 饼形
      scrollTop: 0,
    };
  },
  mounted() {
    this.infoHeight = (this.$refs.bigModel.$el.offsetHeight - 80) / 3;
    let that = this;
  },
  methods: {
    showantiAttributive() {
      this.$router.push("/networkEquipment/antiAttributive");
    },

    hideRightModel() {
      this.rightModelShow = false;
      this.rightModelSpan = 0;
      this.leftModelSpan = 24;
    },
    showRightModel() {
      this.rightModelShow = true;
      this.rightModelSpan = 5;
      this.leftModelSpan = 19;
    },


    onSubmit() { },
  },
};
</script>
<style lang="scss" scoped>
.home-model-left {
  height: calc(100vh - 70px);
}

.home-model-right {

  border-radius: 5px;
  padding: 5px;

  .infoContent {
    padding-top: 48px;
    box-sizing: border-box;
    overflow: hidden;
  }

  .infoModel {
    position: relative;

    .infoTitle {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 5;
      width: 100%;
      background-image: url(~@/assets/xd/new/title.png);
      background-size: 100% 80%;
      background-repeat: no-repeat;
      color: #fff;
    }

    .infoBody {
      height: 100%;
      padding-top: 48px;
      box-sizing: border-box;
    }
  }
}

.flex-container {
  display: flex;
  justify-content: space-between;
}

.infoItem {
  line-height: 1.3em !important;
  font-size: 21px;
}

.rightJ {
  z-index: 1000;
}

.el-header {
  padding: 0;
  z-index: 5;
}

.more {
  color: #fff;
  font-size: 22px;
  font-weight: bold;
}

// .home-model-search{
//   z-index: 5;
// }</style>
